<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的小屋</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/modules/code.css}" type="text/css"/>
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script charset="utf-8" th:src="@{/layui-v2.6.4/layui/layui.js}" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <style>
        body {
            height: 100%;
            /*background: linear-gradient(90deg, #818181, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #818181);*/
        }
    </style>
</head>
<body th:onload="ready([[${ArticleDelmessages}]])">
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 10px;">

        </div>
        <div class="layui-col-md12 layui-row">
            <div class="layui-col-md12 layui-col-lg12 layui-col-sm12  layui-col-xs12" style="text-align: right;font-size: 16px;font-weight: 600;color: #222226;"><i class="layui-icon layui-icon-delete"></i>清空回收站</div>
        </div>
        <div class="layui-col-md10  layui-col-lg10 layui-col-sm10  layui-col-xs10 layui-row" style="height: 13px;"></div>
        <div class="layui-col-md12  layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:1px; background:#E0E0E0;"></div>
        <div th:if="${ArticleDelmessages.size()==0}" class="layui-col-md12 layui-row" style="height: 40px;text-align: center;">
            <b style="font-size: 25px;">回收站为空</b>
        </div>
    </div>
</div>
<div>
    <div class="layui-fluid layui-row">
        <div class="layui-col-md12   layui-col-lg12 layui-col-sm12 layui-col-xs12" id="demo1" style="height: 500px;"></div>
        <div class="layui-col-md12  layui-col-lg12 layui-col-sm12 layui-col-xs12" id="demo20"></div>
    </div>
</div>

<script>
    function ready(message) {
        if(message.length==0){

        }else {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage
                    , layer = layui.layer;
                //测试数据
                var data = message
                laypage.render({
                    elem: 'demo' + 20,
                    limit: 5
                    , count: data.length
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('demo1').innerHTML = function () {
                            var arr = []
                                , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('' +
                                    '<div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" ><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 15px;">' +
                                    '</div><div class="layui-col-md4 layui-col-md4 layui-col-lg4 layui-col-sm4 layui-col-xs4  "><span onclick="return to('+item.id+')" style="font-size: 18px;font-weight: 500;line-height: 24px; color: #222226;overflow: hidden;white-space: normal;word-break: break-word;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">' + item.foTitle + '</span>	</div>' +
                                    '<div class="layui-col-md8 layui-col-md8 layui-col-lg8 layui-col-sm8 layui-col-xs8 " style="text-align: right;"><i onclick="del('+item.id+')" class="layui-icon layui-icon-close"></i></div><div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" style="height: 10px;"></div><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 10px;" style="background-color: #F7F7F7;"><div class="layui-col-md12  layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" style="background-color: ;">' +
                                    '<div  title="' + item.foDate + '" class="layui-col-md12  layui-table-cell" style=" overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;">' +
                                    '<span style="color:#555666;">' + item.foDate + '</span></div><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 20px;background-color:;"><div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 " style="height=100%; text-align: right "><b>发布于:' + item.gmtCreate + '</b></div>  <div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:10px; background:#E0E0E0;"></div></div>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        }
    }
</script>
</body>
</html>